<template>
  <div class="topOperation">
    <div class="tabsBox">
      <div v-for="(tabs, index) in tabsList" :class="[activeVal == tabs.val ? 'acticeTabs' : 'tabsItem']" :key="index"
        @click="handleTabs(tabs.val)">
        {{ tabs.name }}
      </div>
    </div>
    <div class="btnBox">
      <el-button-group style="margin-right: 10px;">
        <el-button size="mini" style="width: 20px;" @click="handleFy(-1)" type="primary"
          icon="el-icon-arrow-left"></el-button>
        <el-button size="mini" style="width: 20px;" @click="handleFy(1)" type="primary"><i
            class="el-icon-arrow-right"></i></el-button>
      </el-button-group>

      <el-button-group>
        <el-button type="primary" @click="handleOperation" icon="el-icon-folder-opened"></el-button>
        <el-button type="primary" @click="handleOperation" icon="el-icon-edit"></el-button>
        <el-button type="primary" @click="handleOperation" icon="el-icon-document-checked"></el-button>
        <el-button type="primary" @click="handleOperation" icon="el-icon-document-copy"></el-button>
        <el-button type="primary" @click="handleOperation" icon="el-icon-mouse"></el-button>
        <el-button type="primary" @click="handleOperation" icon="el-icon-link"></el-button>
        <el-button type="primary" @click="handleOut" icon="el-icon-error"></el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "topOperation",
  data() {
    return {
      activeVal: 1,
      tabsList: [
        {
          name: '沥青闪点与燃点试验检测记录表（克利夫兰开口杯法）',
          val: 1
        },
        {
          name: '沥青针入度、延度、软化点试验检测记录表',
          val: 2
        }
      ]
    };
  },
  methods: {
    handleTabs(val) {
      this.activeVal = val
    },
    handleOperation() {
      this.$message({
        showClose: true,
        message: '正在开发....'
      });
    },
    handleFy(num) {
      this.activeVal = this.activeVal + num
      if (this.activeVal > this.tabsList.length) {
        this.$message({
          showClose: true,
          message: '最后一页了！'
        });
        this.activeVal = this.tabsList.length
      }
      if (this.activeVal < 1) {
        this.$message({
          showClose: true,
          message: '第一页了！'
        });
        this.activeVal = 1
      }
    },
    handleOut(){
      this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
    }
  },
};
</script>

<style scoped lang="scss">
.topOperation {
  height: 50px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #f7f7f9;

  .tabsBox {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;

    .tabsItem {
      cursor: pointer;
      color: #979797;
      display: flex;
      align-items: center;
      height: 60%;
      padding: 5px 10px 2px 10px;
      background: #e3e3e3;
      margin-left: 8px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .acticeTabs {
      cursor: pointer;
      color: #fff;
      display: flex;
      align-items: center;
      height: 60%;
      padding: 5px 10px 2px 10px;
      background: #31b0d5;
      margin-left: 8px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
  }

  .btnBox {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    margin-right: 8px;
  }
}
</style>